<script setup>
import {reactive} from "vue"

let navs = reactive([
    {id: 1, path: "/home/settings", icon: 'icon iconfont icon-shezhi', label: '设置'},
    {id: 2, path: "/home/user", icon: 'icon iconfont icon-yonghu', label: '用户管理'},
    {id: 3, path: "/home/jiangchi", icon: 'icon iconfont icon-zhibo1', label: '奖池管理'},
    {id: 4, path: "/home/zhubo", icon: 'icon iconfont icon-shenfengzheng2', label: '主播认证'},
    {id: 5, path: "/home/zhibo", icon: 'icon iconfont icon-zhibo2', label: '直播管理'},
    {id: 6, path: "/home/shipin", icon: 'icon iconfont icon-zhibo', label: '视频管理'},
    {id: 7, path: "/home/caiwu", icon: 'icon iconfont icon-caiwu', label: '财务管理'},
    {id: 8, path: "/home/jiazu", icon: 'icon iconfont icon-jiazu', label: '家族管理'},
    {id: 9, path: "/home/daoju", icon: 'icon iconfont icon-daoju', label: '道具管理'},
    {id: 10, path: "/home/hongbao", icon: 'icon iconfont icon-hongbao', label: '红包管理'},
    {id: 11, path: "/home/shouhu", icon: 'icon iconfont icon-dunpai', label: '守护管理'},
    {id: 12, path: "/home/dengji", icon: 'icon iconfont icon-jiangpai-guanjun-F', label: '等级管理'},
    {id: 13, path: "/home/yaoqing", icon: 'icon iconfont icon-jiangpai-guanjun-F', label: '邀请奖励'},
    {id: 14, path: "/home/dazhuanpan", icon: 'icon iconfont icon-dazhuanpan', label: '大转盘'},
    {id: 15, path: "/home/denglujiangli", icon: 'icon iconfont icon-yaoqingyouli', label: '登录奖励'},
    {id: 16, path: "/home/xiaoxi", icon: 'icon iconfont icon-xiaoxi', label: '消息管理'},
    {id: 17, path: "/home/neirong", icon: 'icon iconfont icon-neirongguanli', label: '内容管理'},
    {id: 18, path: "/home/chajian", icon: 'icon iconfont icon-chajian', label: '插件中心'},
    {id: 19, path: "/home/gouwu", icon: 'icon iconfont icon-shangcheng2', label: '购物商城'},
    {id: 20, path: "/home/quanzi", icon: 'icon iconfont icon-quanzi', label: '圈子'},
])

defineProps('collapse')
</script>
<template>
    <!-- 侧边栏导航 -->
    <el-menu :collapse="collapse" :default-active="$route.path" active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo" default-active="2"
        text-color="#fff" @open="handleOpen" router @close="handleClose">
        
        <el-menu-item :index="nav.path" v-for="nav in navs" :key="id">
            <el-icon>
                <i :class="nav.icon"></i>
            </el-icon>
            <span>{{ nav.label }}</span>
        </el-menu-item>
        
        <!-- <el-sub-menu index="1">
            <template #title>
                <el-icon>
                    <i class="icon iconfont icon-menu_yhsz"></i>
                </el-icon>
                <span>用户管理</span>
            </template>
            <el-menu-item index="/home/usergroup">
                <el-icon>
                    <i class="icon iconfont icon-user-group"></i>
                </el-icon>
                管理用户组</el-menu-item>
            <el-menu-item index="/home/user">
                <el-icon>
                    <i class="icon iconfont icon-yonghu"></i>
                </el-icon>
                管理用户</el-menu-item>
        </el-sub-menu> -->
        

        <el-menu-item index="/login">
            <el-icon>
                <document />
            </el-icon>
            <span>安全退出</span>
        </el-menu-item>

    </el-menu>
</template>
<style scoped>
@import url('../assets/iconfont.css');
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 280px;
}
.el-menu {
    height: 100%;
    overflow-y: auto;
}
.el-menu::-webkit-scrollbar{
    /* position:absolute; */
    /* left:0; */
    width: 5px;
    
}
.el-menu::-webkit-scrollbar-thumb{
    background-color: #333;
    border-radius: 3px;
}
.el-menu::-webkit-scrollbar-thumb:hover{
    background-color: #d1f1f1;
}

.el-menu-item.logo {
    height: 60px;
    background-color: #123456;
    color: white;
    letter-spacing: 3px;
    text-align: center;
    line-height: 60px;
    font-size: 22px;
}

.el-menu-item.is-active {
    background-color: #abcdef;
    color: #123456;
}
</style>